<template>
	<view class="">
		<!-- #ifdef H5 -->
		<view style="height: 25px;" class="bg-white">
			
		</view>
		<!-- #endif -->
		
		<view style="background-color: #FFFFFF;" :style="{'height':HEIGHT +'px'}"></view>
		<view class="flex padding bg-white align-center rowsa" >
			<!-- <view class="dingwei align-center">济南</view> -->
			<view class="flex  padding-sm " style=" background-color: #F2F3FA;width: 70%;">
				<image class="" src="/static/search/sousuo.png" mode="" style="height: 40rpx;width: 40rpx;"></image>
				<input type="text" value="" placeholder="请输入您需要搜索的产品" @input="getPlatformGoods" />
			</view>
			<view class="button_search ">
				搜索
			</view>
		</view> 
		<view class="list_box">
			<view class="flex">
				<scroll-view scroll-y="true" class="scroll-y" scroll-with-animation="true" style=" width: 250rpx;" :style="{'height':pageHeight+'px'}">
					<view class="padding padding-lr  text-center" style="background-color: #F8F8F8;" :class="{textBg:index==num}"
					 v-for="(item,index) in ProductDataList" :key="index" @click="clueDataMen(item.id,index)">
						<view style="">
							{{item.title}}
						</view>
					</view>
				</scroll-view>

				<scroll-view scroll-y="true" class="scroll-y bg-white" scroll-with-animation="true" :style="{'height':pageHeight+'px'}"
				 @click="">
					<view class=" flex flex-wrap">
						<view v-for="(item,index) in mainArray" :key="index" style="width: 100%;">
								<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" style="height: 200rpx;">
									<swiper-item v-for="(items,index) in shopBannerList">
										<image :src="imgApi+items.img" mode="aspectFill" class="bg-gray" style="height: 200rpx;"></image>
									</swiper-item>
								</swiper>
								<view class=" align-center rowsb padding-right margin-left margin-top-xs bg-white" v-for="(item,index) in ProductData" :key="index" @click="shopDetail(item.id)">
									<view class="flex  ">
										<view class="margin-right">
											<image class=" bg-gray radius" :src="imgApi+item.img" mode="aspectFill" style="height: 180rpx;width: 180rpx;"></image>
										</view>
										<view class="margin-top-xs">
											<view class=" onelineshow">{{item.title}}</view>
											<view style="color: red;" class="margin-top">￥{{item.price}}</view>
										</view>
									</view>
									<view>
									<image src="/static/icon/icon_jia.png" mode="" class=" " style="height: 50rpx;width: 50rpx;"></image>
									</view>
								</view>
								<view class="text-gray text-center padding">
									{{ProductDataText}}
								</view>
						</view>
					</view>
				</scroll-view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getShopBanner,
		ProductClassify,
		getGoodsByid,
		getPlatformGoods
	} from '@/common/path.js'
	export default {
		data() {
			return {
				num: 0,
				imgApi:getApp().globalData.image,
				scrollHeight: '500px',
				leftArray: ['植物园艺', '茶叶酒水', '服饰内衣'],
				mainArray: [{}],
				leftIndex: 0,
				leftIndexdata: 0,
				shopBannerList: [],
				ProductDataList: [],
				ProductData: [],
				ProductDataText: '',
				pageHeight:0,
				heightData:0,//状态栏高度
			}
		},
		onReady() {
			this.pageHeight = uni.getSystemInfoSync().windowHeight;
			// this.HEIGHT = uni.getSystemInfoSync().navigationBarHeight;
			
		},
		computed:{
			HEIGHT(){
				return uni.getSystemInfoSync().statusBarHeight;
			}
		},
		onLoad() {
			//轮播图
			this.getShopBanner()
			//商品分类
			this.ProductClassify()

			/* 设置当前滚动容器的高，若非窗口的高度，请自行修改 */
			// uni.getSystemInfo({
			//     success:(res)=>{
			//         this.scrollHeight=`${res.windowHeight}px`;
			//     }
			// });
		},
		methods: {
			clueDataMen(id,index) {
				this.num = index
				let data = {
					id: id
				}
				this.$axios.axios('post', getGoodsByid, data)
					.then(res => {
						console.log('分类查询商品===========>', res.data);
						if (res.status == 1) {
							this.ProductData = res.data
						}
					})
				
			},
			//搜索
			getPlatformGoods(event) {
				console.log(event.detail.value)
				let messageData = ''
				if (event.detail.value) {
					messageData = event.detail.value
				} else {
					messageData = ''
				}
				let data = {
					message: messageData
				}
				this.$axios.axios('POST', getPlatformGoods, data)
					.then(res => {
						console.log(res)
						if (res.status == 1) {
							this.ProductData = res.data
							this.ProductDataText = ''
						} else {
							this.ProductData = []
							this.ProductDataText = '暂无更多内容'
						}
					})
			},



			//获取顶部轮播图接口
			getShopBanner() {
				this.$axios.axios('post', getShopBanner, {})
					.then(res => {
						console.log('顶部轮播图===========>', res.data);
						if (res.status == 1) {
							this.shopBannerList = res.data
							this.shopBannerListText = ''
						} else {
							this.shopBannerList = []
							this.shopBannerListText = '暂无更多内容'
						}
					})
			},
			//商品分类
			ProductClassify() {
				this.$axios.axios('post', ProductClassify, {})
					.then(res => {
						console.log('商品分类===========>', res.data[0].id);
						if (res.status == 1) {
							this.ProductDataList = res.data
							this.clueDataMen(res.data[0].id,0)
						}
					})
			},
	
			shopDetail(id) {
				uni.navigateTo({
					url: '../shopDetail?id=' + id
				})
			},
			/* 左侧导航点击 */
			leftTap(e) {
				let index = e.currentTarget.dataset.index;
				this.leftIndex = Number(index);
				console.log(event)
			},
			/* 轮播图切换 */
			swiperChange(e) {
				console.log(e)
				let index = e.detail.current;
				this.leftIndex = Number(index);
			}
		}
	}
</script>

<style>
	.textBg {
		border-left: 8rpx solid #0054A7;
		background-color: white !important;
	}
	input{
		font-size:28rpx;
	}
	.button_search{
		background-color: #0054A7;
		padding: 20rpx 30rpx;
		color: white;
		border-radius: 10rpx;
	}
</style>
